var SystemResource = Backbone.Model.extend({
	defaults: {
		_id:		null,
		_hid:		null,
		_name:	null
	}
});

var SystemResourceCollection = Backbone.Collection.extend({
	model: SystemResource
});


systemResourceWood = new SystemResource();
systemResourceWood.set({
	_id:		1,
	_hid:		'Wood',
	_name:	'Holz'
});

systemResourceStone	= new SystemResource();
systemResourceStone.set({
	_id:		1,
	_hid:		'Stone',
	_name:	'Stein'
});

systemResources	= new SystemResourceCollection();
systemResources.add(systemResourceWood);
systemResources.add(systemResourceStone);

var ItemView = Backbone.View.extend({
	tagName: 'li',

	// `initialize()` now binds model change/removal to the corresponding handlers below.
	initialize: function(){
		_.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
	},

	render: function(){
		$(this.el).html(this.model.get('_name'));
		return this;
	}
});

var SystemResourceCollectionView = Backbone.View.extend({
	el: $('body'),
	dest: null,

	initialize: function(){
		_.bindAll(this, 'render', 'appendResource');

		this.sysResources = systemResources;

		this.render();

		return this;
	},

	destFunc: function() {
		//alert(123);
	},

	render: function() {
		var self = this;

		$(this.el).append('<div id="system-resources" class="inline-container clearfix"><span class="header">Resourcen</span><ul></ul></div>');

		_(this.sysResources.models).each(function(resource){ // in case collection is not empty
			self.appendResource(resource);
		}, this);
	},

	appendResource: function(resource) {
		var itemView = new ItemView({
			model: resource
		});
		$('ul', this.el).append(itemView.render().el);
	}
});

systemResourceView = new SystemResourceCollectionView()
	.destFunc();